<!-- 今日进程 -->
<template>
  <view class="schedule">
    <div class="one">
      <div class="time">
        {{ currentYear }}-{{ currentMonth }}-{{ currentDay }}
      </div>
      <div class="button" @click="calendar">更多</div>
    </div>
    <uni-calendar
      class="uni-calendar--hook"
      :selected="info.selected"
      :showMonth="false"
      @change="change"
      @monthSwitch="monthSwitch"
    />
    <div class="two">
      <div
        class="li"
        v-for="(item, index) in list"
        :key="item.id"
        @click="cheduleDetails(item)"
      >
        <div class="left">
          <view class="border" :style="{ backgroundColor: item.color }"></view>
          <view class="">
            <text>11:00-12:00</text>
            <text>{{ item.headline }}</text>
          </view>
        </div>
        <div class="right">
          <view v-if="list[index].state === '1'">
            <image src="../../../static/diImage/时钟.png" mode=""></image>
            <view>未开始</view>
          </view>
          <view v-else-if="list[index].state == '2'">
            <image src="../../../static/diImage/圆.png" mode=""></image>
            <view>进行中</view>
          </view>
          <view v-else-if="list[index].state == '3'">
            <image src="../../../static/diImage/超时.png" mode=""></image>
            <view>已超时</view>
          </view>
          <view v-else-if="list[index].state == '4'">
            <image src="../../../static/diImage/差.png" mode=""></image>
            <view>已取消</view>
          </view>
          <view v-else-if="list[index].state == '5'">
            <image src="../../../static/diImage/对.png" mode=""></image>
            <view>已完成</view>
          </view>

          <view v-else-if="list[index].state == '6'">
            <image src="../../../static/diImage/正方形.png" mode=""></image>
            <view>未完成</view>
          </view>
        </div>
      </div>
    </div>
    <div class="three" v-show="flag">
      <div class="top">
        <div class="left">
          <image src="/static/diImage/问号.png" mode=""></image>
          <div class="p">演示说明</div>
        </div>
        <image src="/static/diImage/差号.png" mode="" @click="show"></image>
      </div>
      <div class="bottom">
        当界面内容超过一屏时，在手机模型区域内上下滚动鼠标滚轮可切换界面显示位置
      </div>
    </div>
  </view>
</template>

<script>
// 获取任意时间
function getDate(date, AddDayCount = 0) {
  if (!date) {
    date = new Date();
  }
  if (typeof date !== "object") {
    date = date.replace(/-/g, "/");
  }
  const dd = new Date(date);

  dd.setDate(dd.getDate() + AddDayCount); // 获取AddDayCount天后的日期

  const y = dd.getFullYear();
  const m =
    dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1; // 获取当前月份的日期，不足10补0
  const d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate(); // 获取当前几号，不足10补0
  return {
    fullDate: y + "-" + m + "-" + d,
    year: y,
    month: m,
    date: d,
    day: dd.getDay(),
  };
}
export default {
  data() {
    return {
      list: [],
      currentDate: new Date(),
      showCalendar: false,
      info: {
        lunar: true,
        range: true,
        insert: false,
        selected: [],
      },
      flag: true,
    };
  },
  methods: {
    // 关闭弹窗
    show() {
      this.flag = false;
    },
    // 跳转到日程-日历
    calendar() {
      uni.navigateTo({
        url: "/pages/di/processingSchedule/processingSchedule",
      });
    },
    // 跳转到日程的详情页
    cheduleDetails(item) {
      uni.navigateTo({
        url:
          "/pages/di/cheduleDetails/cheduleDetails?item=" +
          JSON.stringify(item),
      });
    },

    change(e) {
      console.log("change 返回:", e);
      // 模拟动态打卡
      if (this.info.selected.length > 5) return;
      this.info.selected.push({
        date: e.fulldate,
        info: "",
      });
    },
    confirm(e) {
      console.log("confirm 返回:", e);
    },
    monthSwitch(e) {
      console.log("monthSwitchs 返回:", e);
    },
  },
  onReady() {
    this.$nextTick(() => {
      this.showCalendar = true;
    });
    // TODO 模拟请求异步同步数据
    setTimeout(() => {
      this.info.date = getDate(new Date(), -30).fullDate;
      this.info.startDate = getDate(new Date(), -60).fullDate;
      this.info.endDate = getDate(new Date(), 30).fullDate;
      this.info.selected = [
        {
          date: getDate(new Date(), -3).fullDate,
          info: "",
        },
        {
          date: getDate(new Date(), -2).fullDate,
          info: "签到",
          data: {
            custom: "自定义信息",
            name: "自定义消息头",
          },
        },
        {
          date: getDate(new Date(), -1).fullDate,
          info: "已打卡",
        },
      ];
    }, 2000);
  },
  computed: {
    // 获取	当前是那一天
    currentDay() {
      return this.currentDate.getDate();
    },
    // 获取当前是第几月
    currentMonth() {
      return this.currentDate.getMonth() + 1;
    },
    // 获取当前是哪一年
    currentYear() {
      return this.currentDate.getFullYear();
    },
  },

  created() {
    uni.request({
      url: "http://127.0.0.1:3000/salesLead/getAll", //接口地址
      method: "POST",
      success: (res) => {
        this.list = res.data.data;
        console.log(this.list);
      },
    });
  },
};
</script>

<style lang="scss" scoped>
.schedule {
  width: 100%;
  height: 100%;
  overflow: auto;
  .one {
    width: 100%;
    display: flex;
    padding: 10px;
    justify-content: space-between;
    .button {
      width: 60px;
      height: 30px;
      border: 1px solid #53a5f8;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
    }
  }
  .two {
    width: 100%;
    border-top: 1px solid gainsboro;
    padding: 10px 10px 10px 0;
    .li {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      background-color: #f9f7f7;
      justify-content: space-between;
      padding: 10px 10px 10px 0;
      margin-bottom: 10px;
      color: #6f6e6e;
      .left {
        display: flex;
        view {
          height: 50px;
          display: flex;
          justify-content: space-evenly;
          flex-direction: column;
        }
        .border {
          width: 5px;
          height: 50px;
          margin-right: 10px;
        }
      }
      .right {
        display: flex;
        height: 100%;
        // align-items: center;
        image {
          width: 20px;
          height: 20px;
          margin-right: 10px;
          line-height: 50px;
        }
        view {
          height: 100%;
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .example-body {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
  }
  .calendar-button {
    flex: 1;
    font-weight: bold;
    font-size: 32rpx;
  }
}
.three {
  width: 85%;
  background-color: #333333;
  border-radius: 30rpx;
  color: white;
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  position: fixed;
  left: 6%;
  top: 65%;
  .top {
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }
    }
    image {
      width: 30rpx;
      height: 30rpx;
    }
  }
  .bottom {
    margin-top: 20rpx;
    line-height: 50rpx;
  }
}
</style>
